
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>五角星</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        canvas.width=800;
        canvas.height=800;
        context.fillStyle="black";
        context.fillRect(0,0, canvas.width, canvas.height);
        for(var i=0;i<200;i++) {
            var r=Math.random()*10+10;
            var x=Math.random()*canvas.width;
            var y=Math.random()*canvas.height;
            var a=Math.random()*360;
            drawStar(context, x,y,r,r/2.0,a);
        }
    };
    function drawStar(cxt,x,y,R,rot){

        cxt.save();

        cxt.translate(x,y);
        cxt.rotate(rot/180*Math.PI);
        cxt.scale(R,R);
        starPath(cxt);

        cxt.fillStyle="#fb3";
//        cxt.strokeStyle="#fd5";
//        cxt.lineWidth=3;
//        cxt.lineJoin="round";

        cxt.fill();
//        cxt.stroke();

        cxt.restore();
    }
    function starPath(cxt){
        cxt.beginPath();
        for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
                    -Math.sin((18+i*72)/180*Math.PI));
            cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
                    -Math.sin((54+i*72)/180*Math.PI)*0.5);
        }
        cxt.closePath();
    }
</script>
</body>
</html>